<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Boss Turnos</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">


<link href="css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
<link href="css/bootstrap-modal.css" rel="stylesheet" />
<link href="css/prettify.css" rel="stylesheet" />
<link href="css/grilla.css" rel="stylesheet" />
<link href="css/bootstrap-table.css" rel="stylesheet" >


<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/locales/bootstrap-table-es-AR.min.js" type="text/javascript" ></script>
<script src="js/dates-helper.js"></script>




<script type="text/javascript">
	var activoMap = {};
	activoMap['S'] = "Si";
	activoMap['N'] = "No";
</script>


<style>
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
	position: relative;
	z-index: 2;
	cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before, [data-tooltip]:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-bottom: 5px;
	margin-left: -80px;
	padding: 7px;
	width: 160px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, 0.9);
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	border-top: 5px solid #000;
	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}
</style>
</head>

<body style="background-color: black">

	<div id="wrapper" style="padding-left: 0px">



		<div id="page-wrapper">

			<div class="container-fluid">
				{literal}
				<script languaje="JavaScript">
					function dateCompare(time2) {
						var t1 = new Date();
						var t2 = new Date();
						parts = time2.split(":");
						t2.setHours(parts[0], parts[1], 0, 0);

						// returns 1 if greater, -1 if less and 0 if the same
						if (t1.getTime() > t2.getTime())
							return -1;
						if (t1.getTime() < t2.getTime())
							return 1;
						return 0;
					}
					
					function dateFullCompare(date,horas){
						var t1 = date;
						var t2 = new Date();
						t2.setTime(t2.getTime()+(horas*3600*1000));
						// returns 1 if greater, -1 if less and 0 if the same

						
						if (t1.getTime() > t2.getTime()){
							return -1;
							}
						if (t1.getTime() < t2.getTime()){
							return 1;
							}
						return 0;	
					}
					
					$(document).ready(
									function() {
										$("#reservaConfirmaBtn")
												.click(
														function() {

															var idUsr = $("#idUsrHdn").val();
															var idHorario = $("#idHorarioHdn").val();
															var idClase = $("#idClaseHdn").val();
															var buttonId = $("#buttonIdHdn").val();

															var dataString = 'idUsr='+ idUsr
																	+ '&idHorario=' + idHorario
																	+ '&idClase='+ idClase;
															$.ajax({
																		type : "POST",
																		url : "grillaUsr.php?operacion=reservaTurno",
																		data : dataString,
																		cache : false,
																		success : function(result) {
																			var resultado = jQuery
																					.parseJSON(result);
																			if (resultado.errorMsg) {
																				$('#errorMsg').html(resultado.errorMsg);
																				$('#errorMsg').show("slow");
																			} else {
																				$('#creditosSp').html(resultado[1].creditos);
																				$('#creditosSpMdl').html(resultado[1].creditos);
																				$('#'+ buttonId).css('background-color','#777');
																				$('#'+ buttonId).css('border-color','#777');
																				$('#'+ buttonId).attr("reservadoUsuario","S");
																				$('#'+ buttonId).attr("claseId",resultado[0].id);
																				$('#cargaUsr').modal('toggle');
																			}

																		}
																	});
															return false;
														});
									});

					
					$(document).ready(
							function() {
								$("#misTurnosBtn").click(
												function() {					
											$.ajax({
												type : "POST",
												url : "grillaUsr.php?operacion=getReservas",
												cache : false,
												data : 'idUsr=' + $("#idUsrHdn").val(),
												success : function(result) {
													reservasJson = jQuery.parseJSON(result);
															console.log(reservasJson);
													$('#reservasTable').bootstrapTable({
										                data:reservasJson 
										             });
//										 				console.log(JSON.stringify(reservasJson));
														$('#reservasTable').bootstrapTable('load',reservasJson);
																		}
													});
											$('#historicoModal').modal();
													return false;
												});
										});
function cancelarReserva(idUsr,idClase,origen){
	var dataString = 'idUsr='+ idUsr
	+ '&idClase='+ idClase;
	
	var boton = $(document).find("[claseId=" + idClase + "]");
	
$.ajax({
		type : "POST",
		url : "grillaUsr.php?operacion=cancelarTurno",
		data : dataString,
		cache : false,
		success : function(result) {
			var resultado = jQuery
					.parseJSON(result);
			if (resultado.errorMsg) {
				$('#errorMsg2').html(resultado.errorMsg);
				$('#errorMsg2').show("slow");
			} else {
				$('#creditosSp').html(resultado[1].creditos);
				$('#creditosSpMdl').html(resultado[1].creditos);
				boton.css('background-color','');
				boton.css('border-color','');
				boton.attr("reservadoUsuario","N");
				if(origen=="modal"){
					var idClaseArray = [idClase];
					$("#reservasTable").bootstrapTable('remove', {
			            field: 'clase',
			            values: idClaseArray
			        });
				}else{
					$('#turnoUsr').modal('toggle');
				}
			}

		}
	});
}
					
					
					$(document).ready(
							function() {
								$("#cancelarReservaBtn")
										.click(
												function() {

													var idUsr = $("#idUsrHdn").val();
													var idClase = $("#idClaseHdn").val();

													cancelarReserva(idUsr,idClase,"grilla");
													return false;
												});
							});

					
					$(document).ready(function() {

						$.ajax({
							type : "POST",
							url : "grillaUsr.php?operacion=getWeekUsr",
							cache : false,
							success : function(result) {
								resultJson = jQuery.parseJSON(result);
								arrDates = resultJson[0];
								arrData = resultJson[1];
								generateSchedule(arrDates);
								loadSchedule(arrData);
							}
						});
					});

					function generateSchedule(arrDates) {
						var tbl = document.createElement('table');
						tbl.id = 'tbl_schedule';
						tbl.style.width = '100%';
						tbl.border = 1;
						tbl.className = 'table table-striped';
						tbl.cellSpacing = 0;
						tbl.cellPadding = 0;
						document.getElementById('contenedor').appendChild(tbl);
						//                                         background-color: #424242;color: white;
						// - Titulos
						var rowTitle = tbl.insertRow(-1);
						rowTitle.style.backgroundColor = '#424242';
						rowTitle.style.color = 'white';
						for (var i = 0; i < arrDates.length; i++) {
							var cellTitle = rowTitle.insertCell(-1);
							var dia = arrDates[i];
							var cellHtml = "<strong>" + dia.nombre+ "</strong><br/><h5>" + dia.nro + " de "+ dia.mes + "</h5>";
							var fechaStr = dia.nombre + " " + dia.nro + " de "+ dia.mes;
							if (dia.feriado == 'P') {
								cellHtml += "<h5><i>(Feriado parcial)</i></h5>";
							} else if (dia.feriado == 'T') {
								cellHtml += "<h5><i>(Feriado)</i></h5>";
							}
							cellTitle.innerHTML = cellHtml;
							cellTitle.align = 'center';
							cellTitle.style.padding = '0px';
						}

						// - Contenidos
						var rowContent = tbl.insertRow(-1);
						for (var i = 0; i < arrDates.length; i++) {
							var cellContent = rowContent.insertCell(-1);
							var att = document.createAttribute("celdaNumero");
							att.value = i;
							cellContent.setAttributeNode(att);
							var att = document.createAttribute("feriado");
							att.value = arrDates[i].feriado;
							cellContent.setAttributeNode(att);
							var att = document.createAttribute("fechaStr");
							att.value = arrDates[i].nombre + " "
									+ arrDates[i].nro + " de "
									+ arrDates[i].mes;
							cellContent.setAttributeNode(att);

							cellContent.width = 150;
							cellContent.id = 'cell_content_'
									+ arrDates[i].nombre;
							cellContent.align = 'center';
							cellContent.valign = 'top';
							if (arrDates[i].feriado == 'T'
									|| arrDates[i].feriado == 'D')
								cellContent.style.background = '#424242';
						}
					}

					//                              activo: "S"activoFeriado: "N"capacidad: nullclaseId: nulldia: "Jueves"duracion: "60"fechaClase: nullhora: "13:30"id: "12"profesor: "Ruben"vacantes: null
					function cargarModal(idHorario, fechaStr, hora, profesor,
							idClase, buttonId) {

						var fechaHorario = fechaStr + " " + hora + " hs";

						$('#idHorarioHdn').val(idHorario);
						$('#idClaseHdn').val(idClase);
						$('#buttonIdHdn').val(buttonId);
						$('#errorMsg').hide();
						var reservado = $('#'+ buttonId).attr("reservadoUsuario");
						if(reservado=="N"){
							$('#horarioSp').html(fechaHorario);
							$('#profesorSp').html(profesor);
           					$('#cargaUsr').modal();
						}else if(reservado=="S"){
							$('#errorMsg2').hide();
							$('#horarioSp2').html(fechaHorario);
							$('#profesorSp2').html(profesor);
							$('#turnoUsr').modal();
						}
						
					}

					function loadSchedule(arrData) {
						var tblSchedule = document
								.getElementById('tbl_schedule');
						for (var i = 0; i < arrData.length; i++) {
							var hor = arrData[i];

							if (hor.activo == 'N') {
								continue;
							}
							var cellContent = document.getElementById('cell_content_' + hor.dia);

							if (cellContent.getAttribute("feriado") == 'T') {
								continue;
							} else if (cellContent.getAttribute("feriado") == 'P' && hor.activoFeriado == 'N') {
								continue;
							}

							var schedContent = document.createElement('button');
							schedContent.id = "btn_" + i;

							var att = document.createAttribute("claseId");
							att.value = hor.claseId;
							schedContent.setAttributeNode(att);

							schedContent.style.width = '125px';
							schedContent.style.marginTop = '3px';
							schedContent.style.padding = '0px';
							var att = document.createAttribute("idHorario");
							att.value = hor.id;
							schedContent.setAttributeNode(att);

							var att = document.createAttribute("fechaStr");
							att.value = cellContent.getAttribute("fechaStr");
							schedContent.setAttributeNode(att);

							var att = document.createAttribute("profesor");
							att.value = hor.profesor;
							schedContent.setAttributeNode(att);

							var att = document.createAttribute("hora");
							att.value = hor.hora;
							schedContent.setAttributeNode(att);

							var att = document.createAttribute("vacantes");
							att.value = hor.vacantes;
							schedContent.setAttributeNode(att);

							if (hor.vacantes == 0) {
								schedContent.className = 'btn btn-danger';
							} else {
								schedContent.className = 'btn btn-success';
							}
							
							var att = document.createAttribute("reservadoUsuario");
							att.value = hor.reservadoUsuario;
							schedContent.setAttributeNode(att);
							
							if (hor.reservadoUsuario == 'S') {
								schedContent.style.backgroundColor = '#777';
								schedContent.style.borderColor = '#777';
							}
							if ((dateCompare(hor.hora) == -1)
									&& (cellContent.getAttribute("celdaNumero") == 0)) {
								schedContent.disabled = true;
							}

							schedContent.innerHTML = '<strong>' + hor.hora
									+ '</strong>';
							//                                              <br>' + hor.profesor
							var att = document.createAttribute("data-tooltip");
							att.value = "Profesor: " + hor.profesor;
							schedContent.setAttributeNode(att);

							cellContent.appendChild(schedContent);
							cellContent.appendChild(document
									.createElement('br'));
							schedContent.onclick = function() {
								var idHorario = this.getAttribute("idHorario");
								var idClase = this.getAttribute("claseId");
								var fechaStr = this.getAttribute("fechaStr");
								var profesor = this.getAttribute("profesor");
								var hora = this.getAttribute("hora");
								cargarModal(idHorario, fechaStr, hora,
										profesor, idClase, this.id);

								//                                                      alert( 'IDHorario:' + this.getAttribute("idHorario") + ' IDClase:' + this.id);
							}
						}
					}
					function fechaClaseFormatter(value, row) {
						return row.fechaClaseObject.nombre
							+ " " + row.fechaClaseObject.nro
							+ " de " + row.fechaClaseObject.mes
							+ " " + row.fechaClase.substring(10,16)+ " hs";
					}
					function fechaInscripcionFormatter(value, row) {
						return row.fechaInscripcionObject.nombre
							+ " " + row.fechaInscripcionObject.nro
							+ " de " + row.fechaInscripcionObject.mes
							+ " " + row.fechaInscripcion.substring(10,16)+ " hs";
					}
					function creditoFormatter(value,row) {
						if(value=='-1')
						{
					    	return 'Libre';
						}else{
							return value;
						}
					}

					function operateFormatter(value, row, index) {
					    if (dateFullCompare(app.utils.Date.isoStringToDate(row.fechaClase),2) == 1){
					    	return "";
					    }else{
							return [
										
						        '<a class="cancelarReserva" style="color: red;"  href="javascript:void(0)" title="Cancelar reserva">',
						        '<i class="glyphicon glyphicon-remove"></i>',
						        '</a> '
						        
						    ].join('');
					    }
					}
					window.operateEvents = {
					    'click .cancelarReserva': function (e, value, row, index) {
					    	indice = index;
					    	console.log(row);
					        cancelarReserva(row.usuario,row.clase,"modal");
					    }
					};
				</script>
				{/literal}
				<div>
					<form action="logoutUsr.php">
						<h4>
							Usuario: <strong>{$usuario->nombre}&nbsp;{$usuario->apellido}</strong>
							&nbsp;&nbsp; Creditos: {if $usuario->libre == 'S'} Libre {else} <span
								id="creditosSp">{$usuario->creditos}</span> {/if} &nbsp;&nbsp;
							Vencimiento: {$usuario->getVencimientoCreditosStr()} {if
							$usuario->creditosVencidos == 'menor'} <span style="color: red">(Vencidos)</span>
							{/if}
							<button type="button" id="misTurnosBtn" class="btn btn-primary btn-xs"
								style="margin-left: 10px;">Mis turnos</button>
							<button type="submit" class="btn btn-danger btn-xs"
								style="margin-left: 10px;">Cerrar sesi&oacute;n</button>
						</h4>
					</form>

					<div id="contenedor" class="table-responsive"></div>
					<div class="row">
						<div class="col-md-8">

							<h4>
								Referencia de colores <br> <span
									class="label label-success">Disponible</span> <span
									class="label label-default">Reservado</span> <span
									class="label label-danger">Completa</span>
							</h4>
						</div>
						<!--         <div class="col-md-4" style="text-align:right"> -->
						<!--         </div> -->
					</div>
				</div>



<input type="hidden" id="idUsrHdn" value={$usuario->id}>
<input type="hidden" id="idHorarioHdn"> 
<input type="hidden" id="idClaseHdn">
<input type="hidden" id="buttonIdHdn">
<input type="hidden" id="creditosHdn" value="{$usuario->creditos}">


				<!-- Modal reservas -->
				<div class="modal fade" id="cargaUsr" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">
									<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
								</button>
								<h4 class="modal-title" id="modalLabel">
									Reservar turno:&nbsp;<span> <strong>{$usuario->nombre}&nbsp;{$usuario->apellido}</strong></span>
								</h4>
							</div>
							<div class="modal-body">

								<div class="alert alert-danger" id="errorMsg"
									style="display: none"></div>

										<br>
										<div style="margin-left: 20px">

											<h4>
												Creditos disponibles:&nbsp;<strong> {if
													$usuario->libre == 'S'} Libre {else} <span id="creditosSpMdl">{$usuario->creditos}</span>
													{/if}
												</strong>&nbsp;&nbsp;&nbsp; Vencimiento:&nbsp;<strong>{$usuario->getVencimientoCreditosStr()}
													{if $usuario->creditosVencidos == 'menor'} <span
													style="color: red">(Vencidos)</span> {/if}
												</strong>
											</h4>
											<h4>
												Clase:&nbsp;&nbsp;<strong><span id="horarioSp">
												</span></strong>
											</h4>
											<h4>
												Profesor:&nbsp;&nbsp;<strong> <span id="profesorSp"></span></strong>
											</h4>
										</div>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">Cancelar</button>
								<button type="button" id="reservaConfirmaBtn"
									class="btn btn-primary">Confirmar</button>
							</div>
						</div>
					</div>
				</div>
				
<!-- Fin modal reservas				 -->



				<!-- Modal historico -->
				<div class="modal fade" id="historicoModal" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog" style="width: 650px;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">
									<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
								</button>
								<h4 class="modal-title" id="modalLabel">
									Historial de turnos reservados
								</h4>
							</div>
							<div class="modal-body">
									<table data-toggle="table"
								       data-height="250"
								       class="table table-striped"
								       id="reservasTable">
								    <thead>
								    <tr>
								    	<th data-field="clase" data-visible="false">Clase</th>
								        <th data-field="fechaClaseObject" data-formatter="fechaClaseFormatter">Fecha Clase</th>
								        <th data-field="fechaInscripcionObject" data-formatter="fechaInscripcionFormatter">Fecha inscripci&oacute;n</th>
								        <th data-field="creditosRestantes" data-formatter="creditoFormatter" data-align="center" >Cr&eacute;ditos Restantes</th>
								        <th data-formatter="operateFormatter" data-events="operateEvents"></th>
								    </tr>
								    </thead>
								</table>
									
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">Salir</button>
							</div>
						</div>
					</div>
				</div>
<!-- Fin modal historico				 -->
				

				
				
				
				<!-- Modal turnos -->
				<div class="modal fade" id="turnoUsr" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">
									<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
								</button>
								<h4 class="modal-title" id="modalLabel">
									Informaci&oacute;n turno reservado
								</h4>
							</div>
							<div class="modal-body">

								<div class="alert alert-danger" id="errorMsg2"
									style="display: none"></div>

										<table>
										<tr>
										<td>
										<div style="margin-left: 20px">
											<h4>
												Clase:&nbsp;&nbsp;<strong><span id="horarioSp2">
												</span></strong>
											</h4>
											<h4>
												Profesor:&nbsp;&nbsp;<strong> <span id="profesorSp2"></span></strong>
											</h4>
										</div>
										</td>
										<td >
										<button type="button" id="cancelarReservaBtn"
											class="btn btn-danger" style="margin-left:30px">Cancelar Reserva</button>
										
										</td>
										</tr>
										</table>


							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">Salir</button>
							</div>
						</div>
					</div>
				</div>
<!-- Fin modal turnos				 -->
				
				
			</div>
		</div>
	</div>
</body>
</html>